<template>
  <div class="main-container">
    <el-col style="margin-bottom: 20px">
      <el-button type="primary" @click="goToAdd()">添加站点</el-button>
    </el-col>
    <el-table :data="siteList" style="width: 100%; margin-bottom: 20px">
      <el-table-column prop="id" label="ID" width="80" align="center"> </el-table-column>
      <el-table-column prop="sort" label="排序" align="center" width="80">
        <template slot-scope="scope">
          <el-input v-model="scope.row.sort" @blur="changeSort(scope.row)"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" width="100" align="center"> </el-table-column>
      <el-table-column label="logo" width="160" align="center">
        <template slot-scope="scope">
          <div class="site-logo">
            <img :src="imgUrl + scope.row.logo" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="category" label="所属分类" width="100" align="center"> </el-table-column>
      <el-table-column label="简介" align="center">
        <template slot-scope="scope">
          <div class="site-desc">
            {{ scope.row.desc }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="添加时间" align="center">
        <template slot-scope="scope">
          <div>
            {{ scope.row.add_time | timeFormat('yy-mm-dd hh:MM:ss') }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="is_show" label="是否显示" align="center" width="100">
        <template slot-scope="scope">
          <div>
            <el-switch v-model="scope.row.is_show" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" @change="setSiteStatus(scope.row.id, scope.row.is_show)"> </el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <div>
            <el-link type="primary" :underline="false" @click="goToVisit(scope.row.url)">访问</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link type="primary" :underline="false" @click="goToEdit(scope.row.id)">编辑</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link type="primary" :underline="false" @click="remove(scope.row.id)">删除</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total"></pagination>
  </div>
</template>

<script>
import { getSiteList, setSiteStatus, editSite } from '@/api/site'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      siteList: [],
      total: 0,
    }
  },
  created() {
    // this.getSiteList()
  },
  methods: {
    async getSiteList() {
      const res = await getSiteList()
      if (res.code != 1) return this.$message.error(res.msg)
      // this.$message.success(res.msg)
      console.log(res)
      this.siteList = res.data.data
      this.total = res.data.total
    },
    goToAdd() {
      this.$router.push('/addSite')
    },
    goToEdit(id) {
      this.$router.push({
        path: '/editSite',
        query: {
          id,
        },
      })
    },
    goToVisit(url) {
      window.open('//' + url, '_blank')
    },
    remove(id) {
      this.$confirm('此操作将永久删除该站点, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.setSiteStatus(id, 2)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    async setSiteStatus(id, type) {
      const res = await setSiteStatus({
        id,
        type,
      })
      if (res.code != 1) return this.$message.error(res.msg)
      this.$message.success(res.msg)
      this.getSiteList()
    },
    async changeSort(row) {
      const data = {
        id: row.id,
        sort: row.sort,
      }
      const res = await editSite(data)
      if (res.code != 1) return this.$message.error(res.msg)
      this.$message.success(res.msg)
      this.getSiteList()
    },
    handleSizeChange(newSize) {
      this.queryInfo.page_size = newSize
      this.getSiteList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getSiteList()
    },
  },
  computed: {
    ...mapGetters({
      imgUrl: 'settings/imgUrl',
    }),
    cateNameIndent(level) {
      return function (level) {
        switch (level) {
          case 0:
            return '0px'
          case 1:
            return '14px'
          case 2:
            return '28px'
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.cate-name {
  .el-tag {
    margin-left: 10px;
  }
}
.site-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 42px;
    height: 42px;
  }
}
.radio-box {
  display: flex;
  align-items: center;
  height: 36px;
}
.price-multiple {
  margin: 0 auto;
  width: 60px;
  ::v-deep .el-input__inner {
    text-align: center !important;
  }
  // margin-left: 20px;
}
::v-deep .el-table__row {
  height: 60px !important;
}
::v-deep .el-form-item__content {
  display: flex;
  align-items: center;
  height: 36px;
}
</style>
